<template>
  <div>
    <div>
      <form @submit.prevent="postData">
        <input type="text" v-model="fruit" />
        <button class="hide">
            <i  class="el-icon-circle-plus"></i>
        </button>
      </form>
    </div>
    <div>
      <ul>
        <li v-for="(item, index) of fruitList" :key="index">
          <h2>
            <span>{{ item }}</span>
            <span>
              <Prompt @put="putData" :index="index"></Prompt>
              <button @click="del(index)">删除</button>
            </span>
          </h2>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Prompt from "./components/Prompt.vue";
export default {
  data() {
    return {
      fruitList: [],
      fruit: "",
    };
  },
  components: { Prompt },
  methods: {
    putData(items) {
      axios
        .put(`/api/index/${items.index}`, {
          fruit: items.fruit,
        })
        .then((res) => {
          this.getData();
        });
    },
    postData() {
      axios
        .post("/api/index", {
          fruit: this.fruit,
        })
        .then((res) => {
          this.getData();
        });
    },
    getData() {
      axios.get("/api/index").then((res) => {
        this.fruitList = res.data;
      });
    },
    del(index) {
      axios
        .delete(`/api/index/${index}`)
        .then((res) => {
          this.fruitList = res.data;
        })
        .then((res) => {
          this.getData();
        });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style>
li {
  list-style: none;
}
* {
  margin: 0px;
  padding: 0px;
}
.hide {
  border: 1px solid transparent;
  background-color: #fff;
  font-size: 20px;
  height: 25px;
  line-height: 25px;
  vertical-align:middle;
}
</style>